// 引入Vue类
import Vue from 'vue'
// 引入Vue-router类
import VueRouter from 'vue-router'
// 把vue-router以插件的方式导入到vue中
Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home'),
    // 路由独享守卫 -- 它是属性当前定义的路由所有
    beforeEnter: (to, from, next) => {
      console.log('路由独享守卫');
      // sessionStorage.setItem('a','aaa')
      next()
    }
  },
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "about" */ '@/views/about/index.vue')
  },
  {
    path: '/user/:id',
    component: () => import(/* webpackChunkName: "user" */ '@/views/user.vue')
  }
]

// 实例化路由对象
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

// 切面编程 流水线作业
// 全局导航守卫  每次路由的切换都会进行全局守卫触发
// 前置守卫
// to 将要去的路由对象
// from 来源路由对象
// next 函数，执行些函数让守卫向下执行，否则路由就会停止，不会向下执行,视图不会渲染
router.beforeEach((to, from, next) => {
  // console.log(to, '全局前置守卫');
  console.log('全局前置守卫1');
  next()
})

// 解析守卫
router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫');
  // console.log(sessionStorage.getItem('a'));
  next()
})

// 后置守卫
router.afterEach((to, from) => {
  console.log('全局后置守卫');
})

// 导出路由对象
export default router
